<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>dom修改标签内容主要是通过innerText和innerHtml属性来操作</title>
		<style type="text/css">
			* {
				margin: 0;
				padding: 0;
				box-sizing: border-box;
			}
			.box {
				width: 650px;
				height: 100px;
				margin: 30px auto;
				background-color: #f2f2f2;
			}
			.box h2 {
				height: 50px;
				line-height: 50px;
				font-size: 25px;
				font-weight: 400;
				text-align: center;
			}
			.box p {
				display: block;
				text-align: center;
			}
			.box p button {
			
				width: 100px;
				border: 0;
				outline: none;
				cursor: pointer;
			}
		</style>
	</head>
	<body>
		<div class="box">
			<h2>今天是</h2>
			<p>
				<button>显示时间</button>
			</p>
		</div>
		
		<script type="text/javascript">
			//获取时间
			function getTime() {
				//获取当前的时间
				var date = new Date();
				var year = date.getFullYear();
				//月份
				var month = date.getMonth() + 1;
				//日期
				var dates = date.getDate();
				//获取星期
				var day = date.getDay(); //星期是 0-6
				var dayArr = ['星期天','星期一','星期二','星期三','星期四','星期五','星期六'];
				
				//获取时分秒
				var h = date.getHours();
				h = h < 10 ? '0' + h : h;
				
				var m = date.getMinutes();
				m = m < 10 ? '0' + m : m;
				
				var s = date.getSeconds();
				s  = s < 10 ? '0' + s : s;
				
				return '今天是: ' + year + ' 年 ' + month + ' 月 ' + dates + ' 日 ' + dayArr[day] +'\t'+ h + ' 时 ' + m + ' 分 ' + s + '秒';
			}
			
			//获取按钮和h2元素对象
			var btnEle = document.querySelector('button');
			var hEle = document.querySelector('h2');
			btnEle.onclick = function() {
				hEle.innerText = getTime();
			}
		</script>
	</body>
</html>
